<template>
	<div class="wraper">
		<swiper :options="swiperOptionTop">
		    <!-- slides -->
		    <swiper-slide v-for="item of list" v-if="showSwiper">
		    	<img class="slider-img" :src='item.imgUrl'>
		    </swiper-slide>
		    <!-- Optional controls -->
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>			
	</div>
</template>

<script>
	export default {
		name:'HomeSwiper',
		props:{
			list:Array
		},
		data (){
			return{
				swiperOptionTop: {
		          pagination:'.swiper-pagination',
		          autoplay:5000
		        }
		        // swiperImg:[
		        // 	require('../../../assets/imgs/0.jpeg'),
		        // 	require('../../../assets/imgs/1.jpeg'),
		        // 	require('../../../assets/imgs/2.jpeg'),
		        // 	require('../../../assets/imgs/3.jpeg')
		        // ]
			}
		},
		computed:{
			showSwiper(){
				return this.list.length
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.wraper >>> .swiper-pagination-bullet-active
		background:#fff
	.slider-img
		width:100%
		height:3rem
	/*
		这么写不行的 因为这个是组件 不能更改外部的swiper 
		写成 .wraper >>> .swiper-pagination-bullet-active
		穿透 这样写就可以了 
	*/
	.swiper-pagination-bullet-active
		background:#fff !important
</style>